<template>
  <div class="post-list">
    <!-- 三张图片时显示方式 -->
    <div v-for="(item ,index) in postData" :key="index">
      <div class="post-item" v-if="item.images.length>=3||item.images.length==0" @click="toCreate(item)">
        <!-- 文章标题 -->
        <h4 class="post-title" :title="`${item.title}`">
          <a href="javascript:void(0)">{{item.title}}</a>
        </h4>
        <!-- 文章内容 -->
        <p class="post-desc">
          <a href="javascript:void(0)">{{item.summary}}</a>
        </p>

        <!-- 文章图片 -->
        <div class="post-image" v-if="item.images.length>=3" >
          <a href="javascript:void(0)">
            <img :src="`${item.images[0]}`" alt="">
          </a>
          <a href="javascript:void(0)">
            <img :src="`${item.images[1]}`" alt="">
          </a>
          <a href="javascript:void(0)">
            <img :src="`${item.images[2]}`" alt="">
          </a>
        </div>
        <div class="aa" v-else></div>
        <!-- 文章信息 -->
        <div class="post-info">
          <div class="post-info-left">
            <span>
              <i class="el-icon-location-outline"></i>
              {{item.cityName}}
            </span>
            <div class="post-user">
              by 
              <a href="javascript:void(0)">
                <img :src="$axios.defaults.baseURL + `${item.account.defaultAvatar}`" alt="">
              </a>
              <a href="javascript:void(0)">{{item.account.nickname}}</a>
            </div>
            <span>
              <i class="el-icon-view"></i> {{item.watch}}
            </span>
          </div>
          <div class="post-info-right">
            <span v-if="item.like">{{item.like}} 赞</span>
            <span v-else>0 赞</span>
          </div>

        </div>
      </div>
      <!-- 单张图片显示方式 -->
      <div>
        <div class="post-item image-text" v-if="item.images.length<3&&item.images.length>0" @click="toCreate(item)">
          <div class="post-cover">
            <a href="javascript:void(0)">
              <img :src="`${item.images[0]}`" alt="">
            </a>
          </div>
          <div class="post-content">
            <h4 class="post-title">
              <a href="javascript:void(0)">{{item.title}}</a>
            </h4>
            <p class="post-desc">
              <a href="javascript:void(0)">{{item.summary}}</a>
            </p>
            <div class="post-info">
              <div class="post-info-left">
                <span>
                  <i class="el-icon-location-outline"></i>
                  {{item.cityName}}
                </span>
                <div class="post-user">
                  by 
                  <a href="javascript:void(0)">
                    <img src="@/assets/image/1.png" alt="">
                  </a>
                  <a href="javascript:void(0)">{{item.account.nickname}}</a>
                </div>
                <span>
                  <i class="el-icon-view"></i> {{item.watch}}
                </span>
              </div>
              <div class="post-info-right">
                <span v-if="item.like">{{item.like}} 赞</span>
                <span v-else>0 赞</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="block">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :page-size="pageSize"
        :page-sizes="[3,5,10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      // postData:[],
      postData:[],
      pageSize:3,
      pageIndex:0,
      total:0
    }
  },
  computed:{
  
  },
  watch:{
    '$route':'changeRouter'
  },
  created(){
    // console.log(this.$axios.defaults.baseURL);
   this.$axios({
        url:'/posts',
        method:"get",
        params:{
          _start:this.pageIndex,
          _limit:this.pageSize,
          city:this.$route.query.city
        }
      }).then(res=>{
        this.postData = res.data.data
        console.log(this.postData,'文章信息');
        this.total = res.data.total
        this.$router.push(`post?start=${this.pageIndex}&limit=${this.pageSize}`)
      })
  },
  methods:{
    toCreate(item){
      this.$router.push(`/post/detail?id=${item.id}`)
      console.log(item);
    },
    changeRouter(){
         this.loadPage(this.$route.query.city)
    },
    loadPage(city){
      if(this.$route.query.city){
        this.$axios({
        url:'/posts',
        method:"get",
        params:{
          _start:this.pageIndex,
          _limit:this.pageSize,
          city
        }
        }).then(res=>{
        this.postData = res.data.data
        this.total = res.data.total
        this.$router.push(`post?city=${this.$route.query.city}&start=${this.pageIndex}&limit=${this.pageSize}`)
        })
      }else{
        this.$axios({
        url:'/posts',
        method:"get",
        params:{
          _start:this.pageIndex,
          _limit:this.pageSize,
          city
        }
        }).then(res=>{
        this.postData = res.data.data
        this.total = res.data.total
        this.$router.push(`post?start=${this.pageIndex}&limit=${this.pageSize}`)
        })
      }
      
    },
    sizeChange(newSize){
      console.log(123);
      this.pageSize = newSize
      this.loadPage()
    },
    currentChange(newIndex){
      console.log(newIndex);
      console.log(12131213123);
      this.pageIndex = (newIndex-1) * this.pageSize 
      this.loadPage()
    }
  }
}
</script>

<style lang="less" scoped>
.post-list{
  .post-item{
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #eee;

    .post-title{
      width: 470px;
      margin-bottom: 15px;
      font-size: 18px;
      font-weight: 400;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &:hover{
        color: orange;
      }
    }

    .post-desc{
      font-size: 14px;
      height: 64px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      line-height: 1.5;
        color: #666;
      
    }
    .post-image{
      display: flex;
      justify-content: space-between;
      margin: 15px 0;
      img{
        width: 220px;
        height: 150px;
        object-fit: cover;
      }
    }
    .post-info{
      display: flex;
      box-sizing: border-box;
      font-size: 12px;
      color: #999;
      align-items: center;
      line-height: 26px;
      .post-info-left{
        display: flex;
        >span{
          margin-right: 10px;
        }
        .post-user{
          display: flex;
            margin-right: 10px;
          >a>img{
            display: block;
            width: 16px;
            height: 16px;
            border-radius: 16px;
            margin: 5px;
          }
        }
      }
      .post-info-right{
        margin-left: auto;
        font-size: 16px;
        color: orange;
      }
    }

  }
  // 单张图片显示
  .image-text{
    display: flex;

    .post-cover{
      flex: 1;
      img{
        width: 220px;
        height: 150px;
        object-fit: cover;
      }
    }
    .post-content{
      margin-left: 10px;
      .post-desc{
        margin-bottom: 20px;
        
      }
    }
  }
}
</style>